import React from 'react'
import { Link } from 'react-router-dom'
import { Image, Rate } from 'antd'
import { typeProduct } from '@/types/product'
import './index.scss'

interface Props {
  product: typeProduct
}

const Product = ({
  product
}:Props) => {
  return (
    <div className="product-item">
      {/* 产品图片 */}
      <Image
        className="cover"
        height="200px"
        preview={false}
        src={product.image}
      />
      <div className="info">
        {/* 产品名 */}
        <h3>{product.name}</h3>
        {/* 评分 */}
        <div>
          <Rate
            allowHalf
            defaultValue={product.rating}
            disabled
          />
          <span style={{ marginLeft: '5px' }}>{product.numReviews}条评价</span>
        </div>
        {/* 价格 */}
        <h2>￥{product.price}</h2>
      </div>
    </div>
  )
}

export default Product
